<template>
  <div>
    <div>
      <input type="text" placeholder="请输入手机号" v-model="form.phone">
      <button @click="btn">发送验证码</button>
      <input type="text" placeholder="请输入验证码" v-model="form.code">
      <button @click="login">登录</button>
    </div>
    <SlideSplit
      v-if="slideShow"
      :w="slideInfo.bigWidth"
      :h="slideInfo.bigHeight"
      :l="slideInfo.smallWidth"
      :bigImg="slideInfo.bigImageBase64"
      :smImg="slideInfo.smallImageBase64"
      :smallHeight="slideInfo.smallHeight"
      @sliderJudge = "onJudge"
      @request-event = "getImageCode"
    >
    </SlideSplit>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { getImageCode, verifyImageCode, loginVerification } from "@/api/login";
import SlideSplit from "@components/SlideSplit/index.vue";
import { errorMessages } from "vue/compiler-sfc";
// import { getInfo } from '@api/user'
import { useUserStore } from '@stores/useUserStore'
let userStore = useUserStore()
import useLogin from '@hooks/useLogin'

let slideShow = ref(false);
let slideInfo = reactive({
  "bigWidth": 0,
  "bigHeight": 0,
  "smallWidth": 0,
  "smallHeight": 0,
  "bigImageBase64": "",
  "smallImageBase64": "",
  "bigImage": null,
  "posY": 85,
  "posX": 202,
  "smallImage": null
})
const form = reactive({
  phone: '',
  code: ''
})
// 获取验证码图像
const getImgCode = async() => {
  let res = await getImageCode({
    phone: form.phone
  })
  console.log(res, '图片')
  if (res.code != 0) return
  Object.assign(slideInfo, res.data) // 复制对象
}
const btn = async () => {
  await getImgCode()
  slideShow.value = true;
};
// 滑动松开的事件
const onJudge = async (left) => {
  console.log('滑动成功', left)
  let res = await verifyImageCode({
    movePosX: left,
    phone: form.phone
  })
  console.log('滑动是否成功', res)
  if (res.code != 0) {
    return getImgCode()
  }
  slideShow.value = false
}
const login = async () => {
  let res = await loginVerification({
    phone: form.phone,
    verificationCode: form.code
  })
  console.log('登陆成功', res) // 登陆成功，可以获取到用户token
  if (res.code != 0) { alert (res.errorMessages) }
  const token = res.data.token
  // if (token) {
  //   localStorage.setItem('token', token) // 存储token
  //   let res = await getInfo() // 获取用户信息
  //   userStore.setUserInfo(res.data) // 保存用户信息到store
  // }
  useLogin(token)
}
</script>
